<template>
	<div class="detail">
		<div class="img-swipe" style="overflow: hidden;">
			<mt-swipe :auto="0" v-show="showVideo">
			  <mt-swipe-item v-for="video in videos">
			  	<video  :src="video.file_http_path" :poster="images[0].file_http_path" type="video/mp4" width="100%" height="100%" webkit-playsinline="true" controls preload="auto" style="object-fit: cover;">
				 暂时不支持播放。 
				</video>
			  </mt-swipe-item>
			</mt-swipe>
			<mt-swipe :auto="4000" v-show="!showVideo">
			  <mt-swipe-item v-for="image in images">
			  	<img :src="image.file_http_path" style="width: 100%;"/>
			  	<div type="success" class="xxl" v-show="showDesc">{{image.descri}}</div>
			  </mt-swipe-item>
			</mt-swipe>
			<!--<video v-if="showVideo" :src="videos[0].file_http_path" type="video/mp4" width="100%" height="100%" controls preload="auto">
			 暂时不支持播放。
			</video>-->
			<mt-button type="default" style="position: absolute;right: 30px;top: 30px;z-index: 999;background-color:#495060;color: white;width: 1.5rem;height: 1.5rem;border-radius: 0.75rem;font-size: 14px;" @click="main_log()">{{title}}</mt-button>
			<!--<mt-palette-button :content="title" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')"
			  direction="left" class="pb" :radius="90" ref="target_1" mainButtonStyle="color:#fff;background-color:#495060;"
			  style="position: absolute;right: 50px;bottom: 120px;z-index: 999;">-->
			  <!--<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)">
			  	<i class="iconfont icon-shipin-tianchong bcol">
			  	</i>
			  </div>
			  <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)">
			  	<i class="iconfont icon-xiangqingye bcol"></i>
			  </div>
			  <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)">
			  	<i class="iconfont icon-31dapei bcol"></i>
			  </div>-->
			<!--</mt-palette-button>-->
		</div>
		<div class="line"></div>
		<div class="desc">
			<div>商品名称：{{item.product_name}}</div>
			<label>{{item.gater_content?item.gater_content:'暂无商品简介'}}</label>
			<div>商品款号：{{item.product_code}}</div>
			<div>商品货号：{{item.goods_no}}</div>
			<div style="color: crimson;">购买单件需要交纳定金{{item.orderMoney}}元</div>
		</div>
		<div class="price">
			<label>￥{{item.origin_price}}</label>
			<Button type="success" class="go-join"  @click="goJoin(item.pk_id)">{{fromOpenId?'我要购买':'我要购买'}}</Button>
			<Button type="success" class="go-join"  @click="invite()">邀请好友</Button>
		</div>
		<div class="line"></div>
		<div class="category">
			<div class="header">
				距离活动结束还有{{ctime}}
			</div>
		</div>
		<div class="header-join">
			<mt-button class="mt-tab" type="primary">已参加人数：{{item.joinCount}}</mt-button>
			<mt-button class="mt-tab" type="danger">最低参团人数：{{item.minJoinNum}}</mt-button>
		</div>
		<div class="content-desc-gather" v-if="tabIndex">
			<div class="table-view" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			  <li class="cell" v-for="(item,index) in items">
			  	<div class="header-content">
		  			<div class="header-img">
		  				<img :src="item.headerImg"/>
		  			</div>
		  			<div class="cname">{{item.name}}</div>
		  			<mt-button  :type="item.status == 1?'primary':'danger'" class="showQR-btn">{{item.status == 1?"已付定金"+item.orderMoney+"元":"已退定金"+item.orderMoney+"元"}}</mt-button>
			  	</div>
			  	<div class="purchase-content">
			  		<div class="cdate">
			  			<span>颜色：</span><label>{{item.color_name}}</label>
			  		</div>
			  		<div class="cdate">
			  			<span>尺码：</span><label>{{item.size_name}}</label>
			  		</div>
			  		<div class="cdate">
			  			<span>数量：</span><label>{{item.attribute2}}件</label>
			  		</div>
		  			<div class="cdate">{{item.create_date | formatDate}}</div>
			  	</div>
			  </li>
			</div>
		</div>
		<!--<div class="comment">{{title}}</div>-->
		<mt-popup class="mint-popup mint-popup-4 mint-popup-bottom" style="width: 100%;" v-model="popupVisible" position="bottom"> 
			<div class="pop-view">
				<div class="pop-header">
					<span>请选择颜色尺码数量</span>
					<i class="iconfont icon-guanbi1 exit-color" @click="exit()"></i>
				</div>
				<div class="activity-content">
					<p>成团规则：</p>
					<p>1.到各门店试穿，确定颜色、尺码，下定金。</p>
		    			<p>2.拼团成功后，定金不给退；不成团原路退定金。</p>
		    			<p>3.参加活动并邀请好友参团。</p>
		    			<p>4.在规定时间内到店取货，并付余款。</p>
				</div>
				<div class="pop-spare">颜色</div>
				<div class="color-content">
					<label v-for="(c,index) in cds" :class="{'color-active':index == colorActive}" @click="colorClick(index)">{{c}}</label>
				</div>
				<div class="pop-spare">尺码</div>
				<div class="color-content">
					<label v-for="(s,index) in sizes" :class="{'color-active':index == sizeActive}" @click="sizeClick(index)">{{s.size_desc}}</label>
				</div>
				<div class="pop-spare" style="height: 1.2rem;">
					<span style="line-height: 0.8rem;">购买数量</span>
					<el-input-number style="float: right;" size="mini" v-model="num" :min="1" :max="100" label="选择数量"></el-input-number>
				</div>
				<button type="button" class="ensure" @click="ok()">确定</button>
			</div>
		</mt-popup>
		<!--<Modal
		    v-model="modal1"
		    title="报名确认"
		    @on-ok="ok"
		    @on-cancel="cancel">
		    <p>活动规则如下：</p>
		    <p>1.确认参加活动后，分享并邀请朋友参加此活动</p>
		    <p>2.朋友参加活动后，带朋友到现场消费成功，返现红包存入个人账户，活动结束后将获得返现红包</p>
		</Modal>-->
	</div>
</template>

<style>
	@import url("gather-detail.css");
	@import url("../../common/common.css");
</style>
<script>
	import $ from 'jquery'
	import wx from 'weixin-js-sdk'
	import { MessageBox } from 'mint-ui';
	export default{
		name:'fc-detail',
		data:function(){
			return {
				images:[],
				tmpImages:[],
				item:{},
				tabIndex:true,
				matchs:[{},{},{},{},{}],
				colorIndex:0,
				detailIndex:0,
				showColors:false,
				showDetail:false,
				colorImages:[],
				detailImages:[],
				matchs:[],
				showVideo:false,
				showDesc:false,
				title:'视频',
				pageNo:0,
				items:[],
				ctime:'',
				loading:true,
				modal1: false,
				openId:null,
				fromOpenId:'',
				end:'',
				popupVisible:false,
				num:1,
				colorActive:0,
				sizeActive:0,
				ms:[], //款号code
				cs:[], //颜色code
				cds:[], //颜色描述
				sizes:[], //尺码list 根据款号code和颜色code来获取尺码list
				joinType:'1'
			}
		},
		created(){
			document.title = '商品详情';
			var _self = this;
			this.getData();
			this.share();
			if(_self.utils.getQueryString('msg') == true){
				_self.$Message.success('支付成功，可到会员中心查看订单详情');
			}
			 _self.openId = _self.utils.getQueryString('openId');
			 _self.fromOpenId = ''; //路由openId  分享页面表示from
			if(!_self.openId){
				//非分享页面
				_self.openId = _self.$route.params.oid;
			}else{ 
				//分享页面打开
				 _self.fromOpenId = _self.$route.params.oid;
			}
			wx.ready(function(res){
				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
				//config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
				//如果 urlOpenId =null 表示非分享页面  否则表示分享页面
				
				wx.onMenuShareAppMessage({
					title: _self.item.product_name, // 分享标题
					desc: _self.item.product_comment, // 分享描述
					link: 'http://weixin3.kmtsolution.com/KmtMember360/mobile/share/server?state='+_self.utils.state+'&url='
						  +_self.utils.shareUrl+'weixin/dist/'+'&path=/gather-detail/'+_self.$route.params.id+'/'+_self.openId,//+_self.utils.getQueryString('openId'), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: _self.utils.shareIcon, // 分享图标
					type: 'link', // 分享类型,music、video或link，不填默认为link
					dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
					success: function (res) {
						// 用户确认分享后执行的回调函数
					},
					cancel: function () {
						// 用户取消分享后执行的回调函数
					}
				});
			});
			wx.checkJsApi({
				jsApiList: _self.utils.wxJsApi, // 需要检测的JS接口列表，所有JS接口列表见附录2,
				success: function(res) {
					// 以键值对的形式返回，可用的api值true，不可用为false
					// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
				}
			});
			
		},
		methods:{
			getData(){
				var _self = this;
				this.$Spin.show();
				$.ajax({
			  	type:"post",
			  	contentType:'application/json;charset=UTF-8',
			  	url:this.utils.rootUrl + "fashion/fashionDetail",
			  	data:JSON.stringify({
			  		id:this.$route.params.id,
			  		type:'gather'
			  	}),
			  	success:function(res){
			  		_self.$Spin.hide();
			  		_self.images = res.data.images;
			  		_self.tmpImages = res.data.images;
			  		_self.item = res.data.fashion;
			  		_self.colorImages = res.data.colorImages;
			  		_self.detailImages = res.data.detailImages;
			  		_self.matchs = res.data.matchs;
			  		_self.videos = res.data.videos;
			  		_self.end = res.data.fashion.end_time;
			  		_self.countTime();
			  		_self.loadMore();
			  	},
			  	error:function(e){
			  		_self.$Spin.hide();
			  	}
			  });
			},
			share(){
				var _self = this;
				var currentUrl = window.location.href.split('#')[0];
				$.ajax({
			  	type:"post",
			  	contentType:'application/json;charset=UTF-8',
			  	url:'http://weixin3.kmtsolution.com/KmtMember360/mobile/get/fenxiang',
			  	data:JSON.stringify({
			  		url:currentUrl,
			  		companyId:_self.utils.state
			  	}),
			  	success:function(res){
			  		wx.config({
					    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					    appId: res.data.appId, // 必填，公众号的唯一标识
					    timestamp:res.data.timestamp , // 必填，生成签名的时间戳
					    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
					    signature: res.data.signature,// 必填，签名
					    jsApiList: _self.utils.wxJsApi // 必填，需要使用的JS接口列表
					});
			  	},
			  	error:function(e){
			  	}
			  });
			},
			loadMore(){
				  this.loading = true;
				  var _self = this;
				  _self.pageNo++;
				  $.ajax({
				  	type:"post", 
				  	contentType:'application/json;charset=UTF-8',
				  	url:this.utils.rootUrl + "fashion/gatherList?pageSize=5&pageNo="+_self.pageNo,
				  	data:JSON.stringify({
				  		productCode:_self.item.product_code,
				  		joinType:_self.joinType
				  	}),
				  	success:function(res){
				  		var dataList = res.dataList;
				  		if(dataList.length == 0){
				  			_self.loading = true;
				  			return;
				  		}
				  		_self.loading = false;
				  		for(var i in dataList){
				  			_self.items.push(dataList[i]);
				  		}
				  	},
				  	error:function(e){
				  		
				  	}
				  });
			},
            goJoin(){
            		//先获取颜色列表
            		var _self = this;
            		_self.$Spin.show();
            		$.ajax({
				  	type:"post", 
				  	contentType:'application/json;charset=UTF-8',
				  	url:this.utils.rootUrl + "fashion/getGoodsColorList",
				  	data:JSON.stringify({
				  		goodNo:_self.item.goods_no
				  	}),
				  	success:function(res){
				  		_self.$Spin.hide();
				  		if(res.dataList.length == 0){
				  			return;
				  		}
				  		var item = res.dataList[0];
				  		_self.ms = item.ms?item.ms.split(','):[];
				  		_self.cs = item.cs?item.cs.split(','):[];
				  		_self.cds = item.cds?item.cds.split(','):[];
				  		_self.getSizeList(0);
				  		_self.popupVisible = true;
				  	},
				  	error:function(e){
				  		_self.$Spin.hide();
				  	}
				});
            },
            colorClick(index){
            		this.colorActive = index;
            		this.getSizeList(index);
            },
            sizeClick(index){
            		this.sizeActive = index;
            },
            getSizeList(index){
            		var _self = this;
            		_self.$Spin.show();
            		$.ajax({
				  	type:"post", 
				  	contentType:'application/json;charset=UTF-8',
				  	url:this.utils.rootUrl + "fashion/getGoodsSizeList",
				  	data:JSON.stringify({
				  		materialCode:_self.ms[index],
				  		colorCode:_self.cs[index]?_self.cs[index]:''
				  	}),
				  	success:function(res){
				  		_self.$Spin.hide();
				  		if(res.dataList.length == 0){
				  			return;
				  		}
				  		console.log(JSON.stringify(res))
				  		_self.sizes = res.dataList;
				  	},
				  	error:function(e){
				  		_self.$Spin.hide();
				  	}
				});
            },
            invite(){
            		alert('分享邀请好友参加活动，成功消费后，可得返现红包');
            },
            ok () {
            		var _self = this;
            		//测试id
//          		_self.openId = 'oI25GwZEJq52hPVAmDHJ4jm08B-Y';
            		$.ajax({
				  	type:"post", 
				  	contentType:'application/json;charset=UTF-8',
				  	url:this.utils.rootUrl + "fashion/isMember",
				  	data:JSON.stringify({
				  		openId:_self.openId
				  	}),
				  	success:function(res){
				  		var member = false;
				  		if(res.isMember == 1){//是会员
				  			member = true;
				  		}
				  		_self.joinActity(member);
				  	},
				  	error:function(e){
				  		
				  	}
				});
            },
            joinActity(isMember){
            	var _self = this;
            	if(!isMember){
            			MessageBox.confirm('您个人信息不完整，请完善个人信息即可参加活动').then(action => {
            				if(action == 'confirm'){
            					_self.$router.push({ path: '/register/'+_self.openId});
            				}
					});
					return;
            		}
            		var paySuccessUrl = 'http://weixin3.kmtsolution.com/KmtMember360/mobile/share/server?state='+_self.utils.state+'&url='
						  +_self.utils.shareUrl+'weixin/dist/'+'&path=/gather-detail/'+_self.$route.params.id+'/'+_self.openId
            		var payUrl = 'http://kmtmember360.pazishizhuang.com/WeixinPay/makePay?openId='+_self.openId+'&totalFee='+(parseFloat(_self.item.orderMoney) * _self.num)+'&customerCode=1&materialCode='+_self.item.goods_no+'&type=1&pkId=';
            		if(!_self.fromOpenId || _self.fromOpenId == ''){//非分享页面
					$.ajax({
					  	type:"post", 
					  	contentType:'application/json;charset=UTF-8',
					  	url:this.utils.rootUrl + "fashion/gather",
					  	data:JSON.stringify({
					  		productCode:_self.item.product_code,
					  		openId:_self.openId,
					  		colorCode:_self.cs[_self.colorActive],
					  		colorName:_self.cds[_self.colorActive],
					  		sizeCode:_self.sizes[_self.sizeActive].size,
					  		sizeName:_self.sizes[_self.sizeActive].size_desc,
					  		num:_self.num+'',
					  		goodsNum:_self.item.goods_no
					  	}),
					  	success:function(res){
					  		_self.popupVisible = false;
//					  		if(res.pkId == ''){
//					  			_self.$Message.success(res.msg);
//					  			return;
//					  		}
					  		window.location.href = payUrl+res.pkId+'&url='+paySuccessUrl;
					  	},
					  	error:function(e){
					  		
					  	}
					  });
				}else{ //分享页面打开
					$.ajax({
					  	type:"post", 
					  	contentType:'application/json;charset=UTF-8',
					  	url:this.utils.rootUrl + "fashion/gather",
					  	data:JSON.stringify({
					  		productCode:_self.item.product_code,
					  		openId:_self.openId,
					  		fromOpenId:_self.fromOpenId,
					  		colorCode:_self.cs[_self.colorActive],
					  		colorName:_self.cds[_self.colorActive],
					  		sizeCode:_self.sizes[_self.sizeActive].size,
					  		sizeName:_self.sizes[_self.sizeActive].size_desc,
					  		num:_self.num+'',
					  		goodsNum:_self.item.goods_no
					  	}),
					  	success:function(res){
					  		_self.popupVisible = false;
//					  		if(res.pkId == ''){
//					  			_self.$Message.success(res.msg);
//					  			return;
//					  		}
					  		window.location.href = payUrl+res.pkId+'&url='+paySuccessUrl;
					  	},
					  	error:function(e){
					  		
					  	}
					  });
				}
            },
            exit(){
            		this.popupVisible = false;
            },
			main_log(val) {
//		        this.images = this.showVideo?this.videos:this.tmpImages;
		        this.title = !this.showVideo?"图片":"视频";
		        this.showVideo = !this.showVideo;
		    },
		    sub_log(val) {
		        this.$refs.target_1.collapse();
		        this.showDesc = false;
		        var titles = ['','我型我秀','细节图','搭配图'];
		       	this.title = titles[val];
		        if(val == 1){ //切换视屏
		        		this.showVideo = !this.showVideo;
		        }
		        if(val == 2){ //切换细节图
		        		this.images = this.detailImages;
		        		this.showDesc = true;
		        }
		        if(val == 3){ //切换搭配图
		        		this.images = this.matchs;
		        		this.showDesc = true;
		        }
		    },
		    countTime() {  
		        //获取当前时间  
		        var date = new Date();  
		        var now = date.getTime();  
		        //设置截止时间  
		        //时间差  
		        var leftTime = this.end-now; 
		        //定义变量 d,h,m,s保存倒计时的时间  
		        var d,h,m,s;  
		        var returnValue;
		        if (leftTime>=0) {  
		            d = Math.floor(leftTime/1000/60/60/24);  
		            h = Math.floor(leftTime/1000/60/60%24);  
		            m = Math.floor(leftTime/1000/60%60);  
		            s = Math.floor(leftTime/1000%60);    
		            //将倒计时赋值到div中  
		        		returnValue = d+"天" + h+"时" + m+"分"+s+"秒";
		        }else{
		        	 	returnValue = "本商品聚划算活动已结束";
		        }
		        this.ctime = returnValue;
		        //递归每秒调用countTime方法，显示动态时间效果  
		        setTimeout(this.countTime,1000);  
		  
		        }
			
		},
		watch:{
			joinType(curVal,oldVal){
				this.pageNo = 0;
				this.items = [];
				this.loadMore();
			}
		},
        filters: {
	        formatDate(time) {
	        		return new Date(parseInt(time)).toISOString().substr(0,10);
	        }
	    },
		beforeRouteLeave(to, from, next) {
	        from.meta.keepAlive = false; 
	        if(to.path == '/'){
	        		to.meta.keepAlive = true;
	        }
	        next();  
	    } 
	}
</script>

